<!DOCTYPE html>
<html>
<head>
	{{template "header.html" .}}
	<script type="text/javascript" src="/public/js/my.js" ></script>
	<style type="text/css">  
	html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#watchDog{height:100%; }
#right{height:90%; }
 footer{margin-bottom: 0}
#container_map{height:100%;}
 </style>
</head>

<body>
	<script src="http://api.map.baidu.com/api?v=1.5&ak=Zi3bzWLrNlqNB2qwt40AjpIL&callback=initMap" type="text/javascript" ></script>

	<div id="watchDog" >
		<nav class="navbar navbar-default ">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
			data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">WatchDog</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"
		role="navigation">
				<ul class="nav navbar-nav">
					<li class="active">
						<a href="#" id="mTitle">
							<span>位图监控</span>
						</a>
					</li>
				</ul>
				<ul class="navbar-right nav navbar-nav">
					<li class="active">
						<button type="button" class="btn btn-info btn-default" id="map_text">
							<span>切换视图</span>
						</button>
					</li>
					<li class="active">
						<button type="button" class="btn btn-primary   btn-default" data-toggle="modal" data-target="#setting"> 							<span>设置</span>
						</button>
					</li>
				</ul>

			</div>
		</nav>
		<!-- 	设置更新对话框 -->
		<div class="modal fade" id="setting" tabindex="-1" role="dialog" aria-labelledby="settingLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="settingLabel">更新设置</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" >
							<div class="form-group">
								<label for="scanTime" class="col-sm-3 control-label">位置更新间隔</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="scanTime" placeholder="时间,毫秒"></div>
							</div>
							<div class="form-group">
								<label for="severNo" class="col-sm-3 control-label">服务台号码</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="severNo" placeholder="服务台号码"></div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-8 col-sm-2">
									<button type="cancel" class="btn btn-default" >取消</button>
								</div>

								<div class="col-sm-2">
									<button type="submit" class="btn btn-success " id="settingForm">更新</button>
								</div>
							</div>
						</form>
					</div>

				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->


		<!-- 	设置更新对话框 -->
		<div class="modal fade" id="changeNameDialog" tabindex="-1" role="dialog" aria-labelledby="changeNameLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="changeNameLabel">重命名</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" >
							<div class="form-group">
								<label for="deviceId" class="col-sm-3 control-label" >deviceId</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="deviceId" disabled ></div>
							</div>
							<div class="form-group">
								<label for="oldName" class="col-sm-3 control-label">旧名称</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="oldName" disabled></div>
							</div>
							<div class="form-group">
								<label for="name" class="col-sm-3 control-label">名称</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="name" placeholder="新的名称"></div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-8 col-sm-2">
									<button type="cancel" class="btn btn-default" >取消</button>
								</div>

								<div class="col-sm-2">
									<button type="submit" class="btn btn-success " id="changeNameForm">更新</button>
								</div>
							</div>
						</form>
					</div>

				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		<div class="col-md-3" id="left">
			<div id="datepicker"></div>
			<div class="input-group">
				<input type="text" class="form-control">
				<span class="input-group-btn">
					<button class="btn btn-default" type="button">搜索</button>
				</span>
			</div>
			{{range .locs}}
			<div class="input-group">
				<a class="deviceId btn btn-primary form-control  btn-block" role="button" href="/watch/loc/{{.DeviceId}}" >{{.Name}}</a>
				<span class="input-group-btn">
					<button type="button" class="btn btn-primary   btn-default" data-toggle="modal" data-target="#changeNameDialog"  >改名</button>
					<input type="text" class="hidden" value="{{.DeviceId}}" />
				</span>
			</div>
			
			<br/>
			{{end}}
		</div>
		<div class="col-md-9" id="right">
			<div id="container" >
				<table class ="table table-hover">
					<thead>
						<tr>
							<th>序列</th>
							<th>地址</th>
							<th>时间</th>
							<th>电话</th>

						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			<div id="container_map" class="hidden"></div>
			<div></div>
		</div>

	</div>

</body>
</html>